/*
 * @Author: caijw 
 * @Date: 2018-11-11 13:14:20 
 * @Last Modified by: caijw
 * @Last Modified time: 2019-01-10 23:04:49
 * 
 * 修改账号
 */

import React, { Component } from 'react';
import Header from '../../../../components/Header/Header';
import { connect } from "react-redux";
import '../../../../static/css/weui.less';
import { Toast,Toptips } from 'react-weui';
import * as actions from '../../../../store/action/my';
import '../../../../static/css/common.less';
import './account.less';

class Money extends Component {

    state = {
        showToast: false,
        showTipToast : {
            show : false,
        }
    };

    componentWillMount(){
        //当ret == 1002 的时候，没有绑定卡
        this.props.fetchMyMoney();
    }


    bind_username = React.createRef();
    account =  React.createRef();
    bind_phone = React.createRef();
    money = React.createRef();

    //绑定账号
    handleSubmit = (e)=>{
        e.preventDefault();
        let bind_username = this.bind_username.current.value;
        let account = this.account.current.value;
        let bind_phone = this.bind_phone.current.value;
        let data = {
            type : 'Alipay',
            bind_username : bind_username,
            account : account,
            bind_phone : bind_phone
        }

        this.props.bindCard(data);  
    }

    //体现
    handleMoneySubmit = (e) =>{
        e.preventDefault();
        let money = this.money.current.value;
        let finance_account_id = this.props.my.money.data.data.id;
        let data = {
            money : money,
            finance_account_id : finance_account_id
        }

        this.props.fetchMoney(data);
    }

     //这里可以设置
     componentWillReceiveProps = () =>{
        setTimeout(()=>{
            if(this.props.my.getMoneyRet == 0){
                this.setState({showToast: true});
                this.state.toastTimer = setTimeout(()=> {
                    this.setState({showToast: false});
                }, 2000);
            }else if(this.props.my.getMoneyRet == -1){
                this.setState({showTipToast: {show: true}});
                this.state.toastTimer = setTimeout(()=> {
                    this.setState({showTipToast: {show: false}});
                }, 2000);
            }
        },100)
    }


    render() {
        return (
            <div>
                 <Toast icon="loading" show={this.props.my.fetching}>Loading...</Toast>
                 <Toast icon="success-no-circle" show={this.state.showToast}>提现成功</Toast>
                 {/* <Toptips type="info" show={this.state.showTipToast.show}>{this.props.my.getMoneyMsg}</Toptips> */}
                <div className="detail-region">
                    <Header title="提现"></Header>
                    {this.props.my.money.ret==0 ?<section class="content">
                       <div className="bg-width">
                            <div className="bg-money">余额：{this.props.my.money.data.money}</div>
                            <div className="money-pic"><img src={require('../../../../static/images/money.png')}></img></div>
                       </div>
                       
                       <div className="content-title">到账支付宝:{this.props.my.money.data.data.account}</div>
                       <div className="content-title">提现金额</div>
                       <form onSubmit={this.handleMoneySubmit}>
                            <div className="sumbit-item">
                                    <div className="submit-item-title margin-r40">￥：</div>
                                    <input type="text" placeholder=""  ref={this.money} id="money" require></input>
                            </div>
                            <div className="content-title">可提现金额：{this.props.my.money.data.money}</div>
                            <button className="submit-btn" type="submit">确定</button>
                       </form>
                    </section>
                     : ''
                    }

                     <section class="content"  style={{display:this.props.my.money.ret!=1002?'none':'block'}}>
                       <div className="content-title">请先绑定支付宝</div>
                       <form onSubmit={this.handleSubmit}>
                            <div className="sumbit-item">
                                    <div className="submit-item-title margin-r60">姓名：</div>
                                    <input type="text" placeholder="请输入姓名" ref={this.bind_username} id="bind_username" required></input>
                            </div>
                            <div className="sumbit-item">
                                    <div className="submit-item-title margin-r60">账号：</div>
                                    <input type="text" placeholder="请输入支付宝账号" ref={this.account} id="account" required></input>
                            </div>
                            <div className="sumbit-item">
                                    <div className="submit-item-title margin-r40">手机号：</div>
                                    <input type="text" placeholder="请输入支付宝预留手机号" ref={this.bind_phone} id="bind_phone" required></input>
                            </div>
                            <button className="submit-btn" type="submit">保存</button>
                       </form>
                    </section>
                </div>
            </div>
        )
    }
}

//把组件和store关联在一起
export default connect((state)=>{return {...state}}, actions)(Money);